<h:panelGroup layout="block"
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:nxu="http://nuxeo.org/nxweb/util"
  xmlns:a4j="http://richfaces.org/a4j"
  xmlns:rich="http://richfaces.org/rich"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:c="http://java.sun.com/jstl/core"
  xmlns:f="http://java.sun.com/jsf/core"
  xmlns:nxh="http://nuxeo.org/nxweb/html"
  xmlns:nxwt="http://nuxeo.org/nxforms/runtime/widgettype"
  xmlns:nxl="http://nuxeo.org/nxforms/layout">

  <h3><h:outputText value="#{messages['label.bulk.import.documents']}" /></h3>

  <h:form enctype="multipart/form-data" id="#{fancyboxFormId}" disableDoubleClickShield="#{!useHtml5DragAndDrop}">

    <div class="content positionR">
      <table class="dataInput fullWidth separator">
        <tbody>
        <tr>
          <td class="labelColumn required">
            #{messages['label.bulk.import.documents.select.location']}
          </td>
          <td class="fieldColumn">
            <nxwt:singleDocumentSuggestion mode="edit"
              repository="#{currentServerLocation.name}"
              value="#{importActions}"
              field="selectedImportFolderId"
              required="true"
              width="100%"
              translated="true"
              minChars="3"
              placeholder="label.bulk.import.documents.select.location.placeholder"
              ajaxReRender="#{fancyboxFormId}_buttons"
              pageProviderName="importFolders"
              documentSchemas="dublincore,common" />
            <h:message styleClass="errorMessage" for="#{fancyboxFormId}"
              id="#{fancyboxFormId}_message" />
          </td>
        </tr>
        </tbody>
      </table>

      <nxu:set var="importOptions" value="#{importActions.getImportOptions(action.properties.dropContext)}" cache="true">
        <table class="dataInput fullWidth">
          <tbody>
          <tr>
            <td class="labelColumn required">
              #{messages['label.files.files']}
            </td>
            <td class="fieldColumn">
              <c:if test="#{useHtml5DragAndDrop}">
                <div class="jsDocumentsImportZone dropArea" id="#{action.id}_dropzone" context="#{action.properties.dropContext}"
                  data-loadalreadyuploadedfiles="#{importActions.hasUploadedFiles()}">
                  <div class="dropZoneLabel jsTips">
                    #{messages['label.bulk.import.documents.tips']}
                  </div>
                </div>
              </c:if>

              <c:if test="#{!useHtml5DragAndDrop}">
                <a4j:jsFunction name="clearUploaded" action="#{importActions.cancel()}"/>
                <rich:fileUpload id="fileUploadForm" fileUploadListener="#{importActions.processUpload}"
                  maxFilesQuantity="10" immediateUpload="true"
                  locale="#{localeSelector.localeString}"
                  execute="@this" onclear="nuxeo.documentsImport.onClearPressed();clearUploaded();"
                  onadd="nuxeo.documentsImport.disableBulkImportButton();"
                  onuploadcomplete="nuxeo.documentsImport.enableBulkImportButton();"
                  style="width:100%" listHeight="150px">
                </rich:fileUpload>
              </c:if>
            </td>
          </tr>
          <c:if test="#{importOptions.size() > 1}">
            <tr>
              <td class="labelColumn">
                #{messages['label.bulk.import.documents.select.option']}
              </td>
              <td class="fieldColumn">
                <h:selectOneMenu
                  value="#{importActions.selectedImportOptionId}"
                  id="#{widget.id}" styleClass="langSelect">
                  <a4j:ajax event="change"
                    render="importLayout_panel" />
                  <nxu:selectItems
                    var="importOption" value="#{importOptions}"
                    itemValue="#{importOption.id}" itemLabel="#{messages[importOption.label]}" />
                </h:selectOneMenu>
              </td>
            </tr>
          </c:if>
          </tbody>
        </table>

      </nxu:set>

      <a4j:outputPanel id="importLayout_panel">

        <nxl:layout name="#{importActions.selectedImportOption.properties.layout}" mode="create"
          value="#{importActions.importDocumentModel}"/>

      </a4j:outputPanel>

      <c:if test="#{useHtml5DragAndDrop}">
        <h:outputScript target="#{pageJsTarget}">
          if (jQuery('#fancybox-content').html() !== '') {
            jQuery(".jsDocumentsImportZone").nxDropZone({
              url : "#{contextPath}/api/v1/",
              uploadRateRefreshTime : 500,
              numConcurrentUploads : 3,
              dropContext : ctx,
              uploadTimeout : #{configurationService.getProperty("org.nuxeo.dnd.upload.timeout","30000")},
              execTimeout : #{configurationService.getProperty("org.nuxeo.dnd.exec.timeout","30000")},
              extendedModeTimeout : #{configurationService.getProperty("org.nuxeo.dnd.extendedmode.timeout","2000")},
              handler : nuxeo.documentsImport.createDocumentsImportDocumentHandler("#{importActions.generateBatchId()}")
            });
          }
        </h:outputScript>
      </c:if>

    </div>

    <a4j:outputPanel id="#{fancyboxFormId}_buttons" layout="block">
      <div class="buttonsGadget" data-selectedimportfolder="#{!empty importActions.selectedImportFolderId}">
        <nxu:set var="importButtonDisabled"
          value="#{empty importActions.selectedImportFolderId or !importActions.hasUploadedFiles()}"
          cache="true">
          <nxu:set var="disabledButtonStyleClass"
            value="#{nxu:test(importButtonDisabled, 'disabled', '')}">

            <nxh:commandButton value="#{messages['command.import']}"
              action="#{importActions.importDocuments()}"
              styleClass="button primary jsDocumentsImportButton #{disabledButtonStyleClass}"
              data-selectedimportfolder="#{!empty importActions.selectedImportFolderId}">
              <f:param name="fancyboxFormId" value="#{nxu:componentAbsoluteId(component, fancyboxFormId)}"/>
            </nxh:commandButton>
            <nxh:commandButton value="#{messages['command.cancel']}"
              immediate="true"
              action="#{importActions.cancel()}"
              styleClass="button" />

            <c:if test="#{importButtonDisabled}">
              <h:outputScript target="#{pageJsTarget}">
                nuxeo.documentsImport.disableBulkImportButton();
              </h:outputScript>
            </c:if>
            <c:if test="#{!importButtonDisabled}">
              <h:outputScript target="#{pageJsTarget}">
                nuxeo.documentsImport.enableBulkImportButton();
              </h:outputScript>
            </c:if>

          </nxu:set>
        </nxu:set>
      </div>
    </a4j:outputPanel>
  </h:form>

</h:panelGroup>